<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<div style="margin-top: 20px;">

    <div class="search_block">
        搜索：
        <div class="layui-inline">
            <div class="layui-input-inline">
                <input class="layui-input" id="s_workerId" name="s_workerId"  placeholder="按工号" autocomplete="off">
            </div>
        </div>
        <div class="layui-inline">
            <div class="layui-input-inline">
                <input class="layui-input" id="s_workerName" name="s_workerName"  placeholder="按姓名" autocomplete="off">
            </div>
        </div>
        <div class="layui-inline">
            <div class="layui-input-inline">
                <button class="layui-btn" id="search_btn" data-type="search">搜索</button>
                <label class="tip">${stateMsg}</label>
            </div>
        </div>
        <button class="layui-btn" style="float: right;padding-right: 10px" id="add_btn" data-type="add">录入新员工基本信息</button>
    </div>

    <table class="layui-hide" id="workers_table" lay-filter="workers_table"></table>

    <%--操作条--%>
    <script type="text/html" id="tool_bar">
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑信息</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    </script>

    <script>
        var util, role;
        layui.use(['form', 'laydate','table','layer','util'],function () {
            var form = layui.form,
                laydate=layui.laydate,
                table = layui.table,
                layer=layui.layer,
                $=layui.jquery;
                util=layui.util;
            laydate.render({
                elem:'#inDate'
            });
            form.verify({
                workerId:function (value) {
                    if(value.length<6){
                        return '工号不符合规则';
                    }
                },
                name:function (value) {
                    if(value==""){
                        return '姓名不能为空';
                    }
                }
            });
            form.on('submit(check)', function(data){
                return true;
            });

            table.render({
                elem: '#workers_table'
                ,even:true
                ,url:'/back/worker/load'
                ,cols: [[
                    {field:'workerId', width:120, title: '工号' ,sort: true}
                    ,{field:'name',width:120,title:'姓名',sort:true}
                    ,{field:'sex',width:80,title:'性别',sort:true}
                    ,{field:'role', width:120,title:'职位',sort:true,templet: '#roleTpl'}
                    ,{field:'phone', title: '手机'}
                    ,{field:'inDate', title: '入职日期',templet: '#timeTpl',sort:true}
                    ,{fixed: 'right',title:'操作', width:178, align:'center', toolbar: '#tool_bar'}
                ]]
                ,done:function () {
                }
                ,id:'id'
                ,page: true
                ,limit:10
            });


            //操作按钮监听模块
            table.on('tool(workers_table)',function (obj) {
                var data=obj.data;
                var event=obj.event;
                role=data.role.id;
                if(event=='del'){
                    if(data.id==1){
                        layer.msg("管理员不可删除");
                        return;
                    }
                    layer.confirm('要删除这个员工?', function(index){
                        $.post("${pageContext.request.contextPath}/back/worker/delete",{id:data.id},function (state) {
                            var result=eval('('+state+')');
                            if(result){
                                layer.msg("删除成功");
                                obj.del();
                                layer.close(index);
                            }else{
                                layer.msg("删除失败");
                                layer.close(index);
                            }
                        });

                    });
                }
                if(event=='edit'){
                    if(data.id==1){
                        layer.msg("管理员不可修改");
                        return;
                    }
                    layer.open({
                        title:'修改页面'
                        ,type: 1
                        ,skin: 'layui-layer-lan'
                        ,area: ['420px','600px']
                        , content: $('#worker_form')
                        ,success: function(layero, index){
                            $('#worker_form').attr('action','${pageContext.request.contextPath}/back/worker/modifyInfo');
                            $('#id').val(data.id);
                            $('#workerId').val(data.workerId);
                            $('#name').val(data.name);
                            $('#role').find("option[value ='"+role+"']").attr("selected","selected");
                            $('#phone').val(data.phone);
                            var sex=data.sex;
                            if(sex=='女'){
                                $("#sex_woman").prop("checked","true");
                            }else{
                                $("#sex_man").prop("checked","true");
                            }
                            $('#inDate').val(timeFormat(data.inDate));
                            $('#btn').text("提交修改");
                            form.render();
                        }
                        ,cancel:function () {
                            location.reload();
                        }
                    });
                }
            });

            //搜索添加模块
            var $ = layui.$, active = {
                search: function(){
                    var s_workerId=$('#s_workerId').val();
                    var s_workerName = $('#s_workerName').val();
                    table.reload('id', {
                        where: {
                            s_workerId:s_workerId,
                            s_workerName:s_workerName
                        }
                        ,page: {
                            curr:1
                        }

                    });
                }
                ,add:function () {
                    layer.open({
                        title:'新员工信息录入'
                        ,type: 1
                        ,skin: 'layui-layer-lan'
                        ,area: ['420px','600px']
                        , content: $('#worker_form')
                        ,success: function(layero, index){
                            $('#worker_form').attr('action','${pageContext.request.contextPath}/back/worker/add');
                            $('#workerId').val("");
                            $('#name').val("");
                            $('#role').find("option[value=3]").attr("selected","selected");
                            $('#phone').val("");
                            $('#inDate').val("");
                            $("#sex_man").prop("checked","true");
                            $('#btn').text("提交添加");
                            form.render();
                        }
                    })
                }
            };

            $('#search_btn').on('click', function(){
                var type = $(this).data('type');
                active[type] ? active[type].call(this) : '';
            });

            $('#add_btn').on('click', function(){
                var type = $(this).data('type');
                active[type] ? active[type].call(this) : '';
            });
        });

        //表格日期的格式化
        function timeFormat(t) {
            var date=new Date(t);
            return util.toDateString(date,'yyyy-MM-dd');
        }

        function roleFormat(data) {
            return data.roleName;
        }

    </script>
    <script type="text/html" id="timeTpl">
        {{timeFormat(d.inDate)}}
    </script>
    <script type="text/html" id="roleTpl">
        {{roleFormat(d.role)}}
    </script>

</div>

    <form id="worker_form" style="display: none" class="layui-form" action="#" method="post">
        <input type="hidden" id="id" name="id"/>
        <div class="info_form_body">
            <div class="layui-form-item">
                <label class="layui-form-label">工号:</label>
                <div class="layui-input-block">
                    <input id="workerId"  type="text" name="workerId"   lay-verify="workerId" placeholder="工号" autocomplete="off" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">姓名:</label>
                <div class="layui-input-block">
                    <input id="name" type="text"  name="name"  lay-verify="name" placeholder="姓名" autocomplete="off" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">职位:</label>
                <div class="layui-input-block">

                    <select id="role" name="role.id">
                        <c:forEach var="role" items="${roles}">
                            <option value="${role.id}">${role.roleName}</option>
                        </c:forEach>
                    </select>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">性别:</label>
                <div class="layui-input-block">
                    <input id="sex_man" type="radio" name="sex" value="男" title="男">
                    <input id="sex_woman" type="radio" name="sex" value="女" title="女">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">入职时间:</label>
                <div class="layui-input-block">
                    <input id="inDate"  type="text"  name="inDate"  lay-verify="date"  autocomplete="off" class="layui-input"/>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">联系电话:</label>
                <div class="layui-input-block">
                    <input id="phone" type="text" lay-verify="required|phone" name="phone"  placeholder="联系电话" autocomplete="off" class="layui-input">
                </div>
            </div>


            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button id="btn" lay-submit="" lay-filter="check" class="layui-btn"></button>
                </div>
            </div>
        </div>
    </form>